<template>
  <div class="left-panel">
    <div class="left-item-outer">
      <div class="left-item-title">配置项</div>
    </div>
    <!-- 未选择提示 -->
    <div v-if="!curNode">
      <div class="left-item-outer">
        <span>请选择一个节点</span>
      </div>
    </div>
    <!-- 未初始化 -->
    <div v-if="curNode && !attachPoint" class="left-item-outer">
      <span style="margin-right: 8px">未初始节点</span>
    </div>
    <!-- 动态表单 -->
    <div v-if="curNode && attachPoint">
      <div v-for="cfgObj in cfgList" :key="cfgObj.modelKey" class="dyna-item">
        <div
          style="padding: 4px"
          :class="{
            'form-is-required':
              cfgObj.required && (attachPoint[cfgObj.modelKey] == null || attachPoint[cfgObj.modelKey] === ''),
          }"
          :title="cfgObj.description"
        >
          {{ cfgObj.formLabel }} [type: {{ getTypeLabel(attachPoint[cfgObj.modelKey]) }}]
        </div>
        <div v-if="cfgObj.formType === 'label'" style="padding: 4px; border: 1px solid #cccccc">
          {{ attachPoint[cfgObj.modelKey] }}
        </div>
        <i-switch v-if="cfgObj.formType === 'switch'" v-model="attachPoint[cfgObj.modelKey]" size="small"></i-switch>
        <Input v-if="cfgObj.formType === 'input' && cfgObj.modelKey !== 'bodyOrigin'" v-model="attachPoint[cfgObj.modelKey]" size="small" />
        <Input v-if="cfgObj.formType === 'input' && cfgObj.modelKey === 'bodyOrigin'" v-model="attachPoint[cfgObj.modelKey]" type="textarea" :rows="16"/>
        <InputNumber
          v-if="cfgObj.formType === 'inputNumber'"
          v-model="attachPoint[cfgObj.modelKey]"
          size="small"
          style="width: 187px"
        />
        <Select
          v-if="cfgObj.formType === 'select'"
          v-model="attachPoint[cfgObj.modelKey]"
          size="small"
          @on-change="changeDynForm(cfgObj.modelKey)"
        >
          <Option v-for="attr in cfgObj.selectList" :key="attr.id" :value="attr.id">{{ attr.name }}</Option>
        </Select>
        <Select v-if="cfgObj.formType === 'selectMulti'" v-model="attachPoint[cfgObj.modelKey]" size="small" multiple>
          <Option v-for="attr in cfgObj.selectList" :key="attr.id" :value="attr.id">{{ attr.name }}</Option>
        </Select>
      </div>
    </div>

    <!-- 数组处理 -->
    <div v-if="curNode && attachPoint && curNode.forkArrayOuter" style="padding: 0 16px">
      <div v-for="(item, i) in attachPoint" :key="i">
        <div class="choose-dim-item">
          <span class="item-text" style="margin-right: 4px">{{ '$inst_' + i }}</span>
          <Icon
            type="md-close-circle"
            class="close-btn dim-btn"
            style="display: none"
            title="删除"
            @click="deleteDim(i)"
          />
          <Icon type="ios-copy" class="close-btn dim-btn" style="display: none" title="拷贝" @click="copyDim(i)" />
          <Icon
            v-if="i !== attachPoint.length - 1"
            type="md-arrow-round-down"
            class="close-btn dim-btn"
            style="display: none"
            title="下移"
            @click="sortDown(i)"
          />
          <Icon
            v-if="i !== 0"
            type="md-arrow-round-up"
            class="close-btn dim-btn"
            style="display: none"
            title="上移"
            @click="sortUp(i)"
          />
          <div class="item-close-pos"></div>
        </div>
        <div class="text-max-len margin-bot" :title="JSON.stringify(item)">{{ JSON.stringify(item) }}</div>
      </div>

      <!-- 添加数据对象 -->
      <div class="add-list-item" style="text-align: center; margin-bottom: 16px">
        <Icon type="md-add-circle" class="icon-btn" title="添加" @click="addDimDone()" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FormCommon',
  data() {
    return {};
  },
  props: {
    curNode: {
      type: Object,
    },
    attachPoint: {},
    cfgList: {
      type: Array,
    },
  },
  methods: {
    getTypeLabel(param) {
      return typeof param;
    },
    sortUp(index) {
      this.$emit('sort-up', index);
    },
    sortDown(index) {
      this.$emit('sort-down', index);
    },
    copyDim(index) {
      this.$emit('copy-dim', index);
    },
    deleteDim(index) {
      this.$emit('delete-dim', index);
    },
    addDimDone() {
      this.$emit('add-dim-done');
    },

    changeDynForm(pModelKey) {
      this.$emit('change-dyn-form', pModelKey);
    },
  },
};
</script>

<style scoped>
.dyna-item {
  padding: 0 16px;
}
.form-is-required {
  color: #ff9900;
}
.choose-dim-item {
  margin: 0;
}
.add-list-item {
  padding: 8px 0;
}
/* ---- */
.page-form .item-text:after,
.item-text:before {
  border-bottom-color: rgb(241, 242, 244);
}

/* ==== */
.text-max-len {
  max-width: 187px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.margin-bot {
  margin-bottom: 16px;
  height: 28px;
  line-height: 28px;
  background: #ffffff;
  padding: 0 8px;
}
</style>
